<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>让多行也能有省略效果
</title>
<style type="text/css">
	div{
		width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
	}
</style>
	</head>
	<body>
		
		<div>
			wowowowowowowoowowowowowowowoowowowowowowoowowowowoowowowoowooww
			wowowowowowowoowowowowowowowoowowowowowowoowowowowoowowowoowooww
			wowowowowowowoowowowowowowowoowowowowowowoowowowowoowowowoowooww
		</div>
		
		
		
	</body>
</html>
